{% extends 'goods/goods.html' %}
{% load static %}
{% block haed_files %}
        <link rel="stylesheet" href="{% static 'css/detail.css' %}" />
        <link rel="stylesheet" href="{% static 'css/index_mine.css' %}" />
        <link rel="stylesheet" href="{% static 'css/list.css' %}">
        <style>
		.pagination-outer{ text-align: center; }
		.pagination{
		    font-family: 'Oxygen', sans-serif;
		    display: inline-flex;
		    position: relative;
		}
		.pagination li a.page-link{
		    color: #e44251;
		    background-color: transparent;
		    font-size: 18px;
		    font-weight: 700;
		    letter-spacing: 1px;
		    text-transform: uppercase;
		    line-height: 30px;
		    height: 45px;
		    width: 45px;
		    margin: 0 15px 0 0;
		    border: 1px solid #e44251;
		    border-radius: 0;
		    position: relative;
		    z-index: 1;
		    transition: all 0.4s ease 0s;
		}
		.pagination li.active a.page-link,
		.pagination li a.page-link:hover,
		.pagination li.active a.page-link:hover{
		    color: #fff ;
		    background-color: #e44251;
		    border-color: #e44251;
		}
		.pagination li a.page-link:before,
		.pagination li a.page-link:after{
		    content: '';
		    background-color: #e44251;
		    height: 100%;
		    width: 100%;
		    border-radius: 50%;
		    transform: scale(0) rotateX(360deg);
		    position: absolute;
		    left:0 ;
		    top: 0;
		    z-index: -1;
		    transition: all 0.3s;
		}
		.pagination li a.page-link:after{
		    background-color: transparent;
		    border-radius: 0;
		    transform: scale(0.7);
		    transition-delay: 0.1s;
		}
		.pagination li a.page-link:hover:before{
		    border-radius: 0;
		    transform: scale(1) rotateX(0);
		}
		.pagination li a.page-link:hover:after{
		    background-color: #e44251;
		    opacity: 0;
		    transform: scale(1.5);
		}
		@media only screen and (max-width: 480px){
		    .pagination{
		        display: block;
		        border-radius: 20px;
		    }
		    .pagination li{
		        margin: 5px 2px;
		        display: inline-block;
		    }
		    .pagination li a.page-link{ margin: 0; }
		}
	</style>
{% endblock haed_files %}
{% block title %}{{good_type.name}}{% endblock title %}
{% block page_title %}商品分类{% endblock page_title %}
{% block list_rewrite_0 %}{% endblock list_rewrite_0 %}
{% block hierarchical_relationship_rewriting %}
<li>
    <a href="{% url 'goods:index' %}">全部分类</a>
</li>
<li>
    <a href="">></a>
</li>
<li>
    <a href="{% url 'goods:list' good_type.id %}">{{good_type.name}}</a>
</li>
{% endblock hierarchical_relationship_rewriting %}
{% block list_rewrite_1 %}
	{% csrf_token %}
    <div class="product_list">
        <div class="sort_type">
                <a {% if sort == 'default' %}
                class="activate"
                {% endif %} href="{% url 'goods:list' good_type.id %}">默认</a>
                <a {% if sort == 'price' %}
                class="activate"
                {% endif %} href="{% url 'goods:list' good_type.id %}?sort=price">价格</a>
                <a {% if sort == 'sales' %}
                class="activate"
                {% endif %}href="{% url 'goods:list' good_type.id %}?sort=sales">人气</a>
        </div>
        <div class="product_details_list">
                <ul>
                    {% for good in goods %}
                    <li>
                        <a href="{% url 'goods:detail' good.id %}"
                            ><img
                                src=" {{good.image.url}} "
                                alt=""
                        /></a>
                        <a href="{% url 'goods:detail' good.id %}">{{good.name}}</a>
                        <div>
                            <span>￥{{good.price}}</span>
                            <p>{{good.price}}/{{good.unite}}</p>
                            <a id="{{good.id}}" class="add_cart" href="javascript:;"
                                ><img
                                    src="{% static 'image/购物车.png' %}"
                                    alt=""
                            /></a>
							<div class="add_cart_num">+1</div>
                        </div>
                        <div class="bottom_bar"></div>
                    </li>
                    {% empty %}
                    <a href="{% url 'goods:index' %}">暂时没有商品，去别地儿逛逛呗！</a>
                    {% endfor %}
                </ul>
        </div>
        <div class="demo" style="margin-top:30px">
	        <div class="container" style="width:auto">
	            <div class="row pad-15">
	                <div class="col-md-12">
	                    <nav class="pagination-outer" aria-label="Page navigation">
	                        <ul class="pagination">
                                {% if goods.has_previous %}
                                 <li class="page-item">
	                                <a href="{% url 'goods:list' good_type.id goods.previous_page_number %}?sort={{sort}}" class="page-link" aria-label="Previous">
	                                    <span aria-hidden="true">&laquo;</span>
	                                </a>
	                            </li>
                                {% endif %}
                                {% for page_index in pages %}
                                    {% if goods.number == page_index %}
                                        <li class="page-item active"><a class="page-link" href="{% url 'goods:list' good_type.id page_index %}?sort={{sort}}">{{page_index}}</a></li>
                                    {% else %}
                                        <li class="page-item"><a class="page-link" href="{% url 'goods:list' good_type.id page_index %}?sort={{sort}}">{{page_index}}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if goods.has_next %}
                                <li class="page-item">
	                                <a href="{% url 'goods:list' good_type.id goods.next_page_number %}?sort={{sort}}" class="page-link" aria-label="Next">
	                                    <span aria-hidden="true">&raquo;</span>
	                                </a>
	                            </li>
                                {% endif %}
	                        </ul>
	                    </nav>
	                </div>
	            </div>
	        </div>
	    </div>
    </div>
{% endblock list_rewrite_1 %}
{% block bottom_file %}
<script>
        $(function() {
            //商品分类一栏淡入淡出
            $(
                "body > div.index_content > div.landscape_navigation > div > div"
            ).hover(function () {
                $(
                    "body > div.index_content > div.landscape_navigation > div > div > ul"
                )
                    .stop()
                    .fadeToggle();
            });

			//购物车
			$('.add_cart').click(function (event) {
				//event.stopPropagation();

				//下面需要 所以这里负值给变量
				let a = $(this)

				let sku_id = $(this).prop('id');
				let csrfmiddlewaretoken = $('div.detail_content > div > div > input[type=hidden]').val()
				$.post(
					"/cart/add",
					{'count':1,'sku_id':sku_id,'csrfmiddlewaretoken':csrfmiddlewaretoken},
					function(data){
						if(data.res==5){
							//一点击就显示出来
							a.next().css({
								opacity:1,
							})
							//慢慢上滑消失
							a.next().animate({
								opacity:0,
								top:165,
							},
							'slow',
							callback = function () {
								//默默回到原位
									a.next().css({
										top:199,
									})
								}
							)
							$('body > div.search_mine > div.cart_mine > p').html(data.total_count)
						}
						else{
							alert(data.errmsg)
						}
					}
				)
			})
        });

		//购物车
		$('.add_cart').click(function () {
			//下面需要 所以这里负值给变量
			let a = $(this)

			let sku_id = $(this).prop('id');
			let csrfmiddlewaretoken = $('div.detail_content > div > div > input[type=hidden]').val()
			$.post(
				"/cart/add",
				{'count':1,'sku_id':sku_id,'csrfmiddlewaretoken':csrfmiddlewaretoken},
				function(data){
					if(data.res==5){
						//一点击就显示出来
						a.next().css({
							opacity:1,
						})
						//慢慢上滑消失
						a.next().animate({
							opacity:0,
							top:165,
						},
						'slow',
						callback = function () {
							//默默回到原位
								a.next().css({
									top:199,
								})
							}
						)
						$('body > div.search_mine > div.cart_mine > p').html(data.total_count)
					}
					else{
						alert(data.errmsg)
					}
				}
			)
		})
</script>
        <script src="{% static 'js/to_top_jquery.toTop.min.js' %}"></script>
<script>
$('.to-top').toTop();
</script>
{% endblock bottom_file %}